<template>
	<view class="container">
		<m-header class="top" :list="adDatas"></m-header>
		<view class="shuzi u-m-t-20">
			<view class="count u-p-t-36 u-p-b-10 u-flex u-row-center">
				<u-count-to
					class="count-to"
					ref="uCountTo"
					:autoplay="autoplay"
					:startVal="startVal"
					:endVal="endVal"
					:duration="duration"
					:decimals="decimals"
					:bold="bold"
					:fontSize="fontSize"
					:color="color"
				></u-count-to>
				<text class="u-m-l-10">名优秀伙伴为您服务</text>
			</view>

			<u-form :model="model" :rules="rules" ref="uForm" :errorType="errorType">
				<u-form-item class="group" :label-width="200" :border-bottom="false" :label-position="labelPosition" label="我是" prop="iam">
					<u-input :border="border" type="select" :select-open="selectShowWs" v-model="model.iam" placeholder="请选择"
					 placeholderStyle="color: #4B9CFF;" input-align="right" @click="selectShowWs = true"></u-input>
				</u-form-item>
				<u-form-item class="group" :label-width="200" :border-bottom="false" :label-position="labelPosition"
				 label="我需要" prop="kcfl">
					<view style="width:100%;text-align: right;color: #4B9CFF;"  @click="selectShowkclx = true">{{model.demand.kcfl || "请选择"}}</view>
					<u-select mode="single-column" :list="kclxs" v-model="selectShowkclx" @confirm="selectConfirmKclx"></u-select>
				</u-form-item>
				<u-form-item class="group" :label-width="200" :border-bottom="false" :label-position="labelPosition"
				 label="我意向" prop="wyx">
					<view style="flex: 1;text-align: right;" @click="handleWyx">
						<u-icon name="arrow-right" style="color:#9DA2B0;font-size: 32upx;"></u-icon>
					</view>
				</u-form-item>				
				<block v-if="model.demand.kcfl != ''">
					<u-gap :bg-color="bgColor" :height="height" :margin-top="marginTop" :margin-bottom="marginBottom"></u-gap>
						<u-form-item v-if="model.iam == '智汇团队'" class="u-m-l-30 u-m-r-40" :label-width="200" :label-position="labelPosition"
						 label="团队" prop="hdjf">
							<u-input type="select" v-model="model.demand.team" placeholder="请选择" placeholderStyle="color: #0D1D36;"
							 input-align="right"></u-input>
						</u-form-item>
						<u-form-item class="u-m-l-30 u-m-r-30" :required="required" :label-width="200"
						 :label-position="labelPosition" :border-bottom="true" label="课程分类" prop="fblx">
							<view style="width:100%;text-align: right;">{{model.demand.kcfl || "请选择"}}</view>
						</u-form-item>
						<block v-if="model.demand.kcfl == '专家课程' || model.demand.kcfl == '牛人课程'">
							<u-form-item class="u-m-l-30 u-m-r-30" :required="required" :label-width="200" :label-position="labelPosition"
							 :border-bottom="true" label="专业方向" prop="specialty">
								<view style="width:100%;text-align: right;">{{model.demand.specialty || "请选择"}}</view>
							</u-form-item>
							<u-form-item class="u-m-l-30 u-m-r-30" :required="required" :label-width="200" :label-position="labelPosition"
							 :border-bottom="true" label="课程内容" prop="kcnr">
								<view style="width:100%;text-align: right;">{{model.demand.kcnr || "请选择"}}</view>
							</u-form-item>
					
						</block>
						<block v-if="model.demand.kcfl == '高校课堂'">
							<u-form-item class="u-m-l-30 u-m-r-30" :required="required" :label-width="200" :label-position="labelPosition"
							 :border-bottom="true" label="专业方向" prop="specialty">
								<view style="width:100%;text-align: right;">{{model.demand.specialty || "请选择"}}</view>
							</u-form-item>
						</block>
						<block v-if="model.demand.kcfl == '培训机构课堂'">
							<u-form-item class="u-m-l-30 u-m-r-30" :required="required" :label-width="200" :label-position="labelPosition"
							 :border-bottom="true" label="阶段" prop="specialty">
								<view style="width:100%;text-align: right;">{{model.demand.jd || "请选择"}}</view>
							</u-form-item>
						</block>
						<block v-if="model.demand.kcfl == '职业教育培训'">
							<u-form-item class="u-m-l-30 u-m-r-30" :required="required" :label-width="200" :label-position="labelPosition"
							 :border-bottom="true" label="培训方向" prop="specialty">
								<view style="width:100%;text-align: right;">{{model.demand.pxfx || "请选择"}}</view>
							</u-form-item>
						</block>
					
					<view class="qtsm u-m-l-40 u-m-r-30 u-m-t-40">
						<image src="../../static/img/releasesm.png" style="width: 29rpx; height: 29rpx;" mode=""></image>
						<text class="hz">简短说明</text>
					</view>
					<u-form-item class="zwpj u-m-l-30 u-m-r-30 " :required="required" :label-position="labelPosition" prop="jdsm">
						<u-input type="textarea" :border="border" placeholder="请输入简短说明" v-model="model.demand.jdsm" />
					</u-form-item>
					<!-- <u-form-item class="u-m-l-30 u-m-r-30" :required="required" :label-width="200" :label-position="labelPosition"
					 :border-bottom="true" label="地域" prop="region">
						<u-input type="select" v-model="model.demand.region" placeholder="请选择" placeholderStyle="color: #0D1D36;"
						 input-align="right"></u-input>					
					</u-form-item> -->
					<u-form-item class="u-m-l-30 u-m-r-40" :label-width="200" :label-position="labelPosition" :border-bottom="false"
					 label="时间预告" prop="sjyg">
						<u-input :border="border" placeholder="请选择" v-model="model.demand.sjyg" type="text" input-align="right"></u-input>
					</u-form-item>
				</block>
				<block v-if="model.intention != ''">
					<u-gap :bg-color="bgColor" :height="height" :margin-top="marginTop" :margin-bottom="marginBottom"></u-gap>
					<u-form-item class="u-m-l-30 u-m-r-30" :required="required" :label-width="200" :label-position="labelPosition"
					 :border-bottom="true" label="地域" prop="region">
						<u-input type="select" v-model="model.intention.region" placeholder="请选择" placeholderStyle="color: #0D1D36;"
						 input-align="right"></u-input>					
					</u-form-item>				
					<u-form-item v-if="model.intention.sf == '团队'" class="u-m-l-30 u-m-r-30" :required="required" label-width="200" :label-position="labelPosition"
					 label="团队身份" prop="grsf">
						<view style="width:100%;text-align: right;">{{model.intention.grsf || "请选择"}}</view>
					</u-form-item>
					<u-form-item v-else class="u-m-l-30 u-m-r-30" :required="required" label-width="200" :label-position="labelPosition"
					 label="导师身份" prop="grsf">
						<view style="width:100%;text-align: right;">{{model.intention.grsf || "请选择"}}</view>
					</u-form-item>
				</block>
				
				<u-gap :bg-color="bgColor" :height="height" :margin-top="marginTop"></u-gap>
				<u-form-item class="u-m-l-30 u-m-r-30" :required="required" :label-width="200" :label-position="labelPosition"
				 :border-bottom="true" label="名称" prop="name">
					<u-input :border="border" placeholder="请输入" v-model="model.name" type="text" input-align="right"></u-input>
				</u-form-item>
				<u-form-item class="u-m-l-30 u-m-r-30" label-width="200" :label-position="labelPosition" label="关键字" prop="gjz">
					<u-input :border="border" placeholder="请输入" v-model="model.gjz" type="text" input-align="right"></u-input>
				</u-form-item>
				<u-form-item class="u-m-l-30 u-m-r-30" label-width="200" :label-position="labelPosition" label="屏蔽关键字" prop="pbgjz">
					<u-input :border="border" placeholder="请输入" v-model="model.pbgjz" type="text" input-align="right"></u-input>
				</u-form-item>
				<u-form-item class="u-m-l-30 u-m-r-40" :label-width="200" :label-position="labelPosition" label="匹配时效" prop="ppsx">
					<u-input :border="border" @click="showDate = true" placeholder="请选择" v-model="model.ppsx" type="text" input-align="right"></u-input>
					<u-calendar v-model="showDate" ref="calendar" @change="changeDate" mode="date"
						:start-text="startText" :end-text="endText" :range-color="rangeColor" max-date="2022-10-01"
						:range-bg-color="rangeBgColor" :active-bg-color="activeBgColor"
					>
					</u-calendar>
				</u-form-item>
				<u-form-item class="u-m-l-30 u-m-r-40" :label-width="200" :label-position="labelPosition" :border-bottom="false" label="匹配权重" prop="customize">
					<view style="flex: 1;text-align: right;" @click="handleClickWeight()">
						<u-icon name="arrow-right" style="color:#9DA2B0;font-size: 32upx;"></u-icon>
					</view>
				</u-form-item>
				<u-gap :bg-color="bgColor" :height="height"></u-gap>
				<!-- <view class="qtsm u-m-l-40 u-m-r-30 u-m-t-40">
					<image src="../../static/img/releasesm.png" style="width: 29rpx; height: 29rpx;" mode=""></image>
					<text class="hz">其他说明</text>
				</view>
				<u-form-item class="  zwpj u-m-l-30 u-m-r-30 " :label-position="labelPosition"  prop="qtsm">
					<u-input  type="textarea" :border="border" placeholder="请输入其他说明" v-model="model.qtsm" />
				</u-form-item> -->
			</u-form>
		</view>
		<view class="warp u-p-30">
			<u-button class="button" @click="submit">马上为我匹配</u-button>
			<!--弹出框-->
			<u-select mode="single-column"  value-name="id" label-name="name" :list="wsList" v-model="selectShowWs" @confirm="selectConfirmWs"></u-select>
			
			<!--弹出框-->
		</view>
	</view>
</template>
<script>
export default {
	data() {
		let that = this;
		return {
			adDatas:[],
			selectShowkclx:false,
			kclxs: this.$mConstDataConfig.kclxs,
			showDate:false,
			show: false,
			mode: 'range',
			result: "请选择日期",
			startText: '开始',
			endText: '结束',
			rangeColor: '#2979ff',
			rangeBgColor: 'rgba(41,121,255,0.13)',
			activeBgColor: '#2979ff',
			btnType: 'primary',
			height: 20,
			bgColor: this.$u.color.bgColor,
			marginTop: 30,
			marginBottom: 30,
			/**
			 * form验证
			 * */			
			model: {
				demand:{kcfl:''},
				intention:''
			},	
			
			wsList:[],
			wxyList:[],
			wyxList:[],
			rules: {},
			reqBody: {},
			required: false,
			border: false,
			check: false,
			region: '',
			selectStatus: 'close',
			selectShowZyp: false,
			selectShowWs: false,
			selectShowWxy: false,
			selectShowWyx: false,
			selectShowFbsx: false,
			selectShowQydy: false,
			selectShowLyxy: false,
			pickerShow: false,
			labelPosition: 'left',
			codeTips: '',
			errorType: ['toast'],
			/**/

			/**
			 * 数字统计
			 * */
			startVal: 500,
			endVal: 500,
			separator: ',',
			decimals: 0,
			duration: 2000,
			autoplay: true,
			useEasing: true,
			current: 3,
			isStop: false,
			bold: false,
			fontSize: 24,
			color: '#fff',
			/**/
			keyIndex:0,
			keywords: [{name:'企业',selected:true},{name:'设计师',selected:false},{name:'监理',selected:false},{name:'大型企业',selected:false},{name:'采购',selected:false},{name:'监理',selected:false}]
		};
	},
	mounted() {},
	onShow(){
	},
	onReady() {
		this.$refs.uForm.setRules(this.rules);
	},	
	onLoad(options){			
		if(options.data){
			let data = JSON.parse(decodeURIComponent(options.data));
			console.log("data",data);
			this.model = data;
			this.model.imean = data.mode;
			console.log("model",this.model);
		}	
		if(options.row){
			this.model = JSON.parse(decodeURIComponent(options.row));
			console.log("row",this.model);
		}
		this.getFetchUserExtra();
		this.findfetchAd(10);
		this.findextraIndex();
	},
	methods: {								
		async findextraIndex(){
			let result = await this.$apis.extraIndex();
			this.endVal = this.endVal + result.data;
		},	
		async findfetchAd(type){
			let result = await this.$apis.fetchAd({type:type});
			this.adDatas = result.data;
		},	
		selectConfirmKclx(e) {
			this.model.demand.kcfl = '';
			e.map((val, index) => {
				this.model.demand.kcfl += this.model.demand.kcfl == '' ? val.label : '-' + val.label;
			});				
			if(this.model.demand.kcfl == "添加课程"){
				this.$mRouter.push({
					route:this.$mRoutesConfig.addClassroom
				});
				console.log("kcfl",this.model.demand.kcfl);
			}else{
				this.toimean();
			}
		},
		handleWyx(){
			let url = encodeURIComponent(JSON.stringify("wisdomcommune/zhihuiClassroom"));
			if(this.model.demand !== ''){			
				uni.navigateTo({
					url: 'component/wyxzhihuiClassroom?type='+url+'&row=' + encodeURIComponent(JSON.stringify(this.model))
				})
			}else{
				uni.showToast({
					title: '请先选择我需要',
					icon: 'none'
				});
			}
		},
		toimean(){
			if(this.model.iam === undefined){
				uni.showToast({
					title:"请选择我是",
					icon:"none"
				})
			}else{
				let url = encodeURIComponent(JSON.stringify("wisdomcommune/zhihuiClassroom"));
				uni.navigateTo({
					url: 'component/wxyzhihuiClassroom?type='+url+'&row=' + encodeURIComponent(JSON.stringify(this.model))
				})
				console.log('我需要');
			}
		},
		async getFetchUserExtra(){
			let result = await this.$apis.fetchUserExtra({type:0});
			this.wsList = result.data;
		},
		handleClickWeight(e) {
			var model = encodeURIComponent(JSON.stringify(this.model));
			let url = encodeURIComponent(JSON.stringify("wisdomcommune/zhihuiClassroom"));
			if(this.model.wyx == '企业'){				
				uni.navigateTo({
					url: '../user/companyWeight?type='+url+'&row=' + model
				})
			}else if(this.model.wyx == '团队'){
				uni.navigateTo({
					url: '../user/teamWeight?type='+url+'&row=' + model
				})
			}else{				
				uni.navigateTo({
					url: '../user/personWeight?type='+url+'&row=' + model
				})
			}
		},
		changeDate(e) {
			this.model.ppsx = e.result;	
		},
		change(e) {
			if (this.mode == 'range') {
				this.model.fbsx = e.startDate + " - " + e.endDate;
			} else {
				this.model.fbsx = e.result;
			}
		},
		//新增项目
		async submit() {
			this.$refs.uForm.validate(valid => {
				if (valid) {
					console.log('验证通过');
					this.kcMatching();
				} else {
					console.log('验证失败');
				}
			});
			
		},
		//匹配并信息录入
		async kcMatching(){
			let data = await this.$apis.matchBrain(this.model);
			console.log(JSON.stringify(data));
			// uni.setStorageSync("userInfo",data);
			if(data.code == 200){
				uni.showToast({
						title:"发布匹配成功",
						icon: 'none'
				});
				setTimeout(() => {
					this.$mRouter.switchTab({
						route:this.$mRoutesConfig.message
					});
				},1000)
			}else{
				uni.showToast({
					title: data.message,
					icon: 'none'
				});
				return;
			}
		},		
		selectKey(e){
			this.keywords[e].selected = !this.keywords[e].selected;
		},
		// 选择地区回调
		regionConfirm(e) {
			this.model.region = e.province.label + '-' + e.city.label + '-' + e.area.label;
		},
		// 选择
		selectConfirmWs(e) {
			this.model.iam = '';
			e.map((val, index) => {
				this.model.iam += this.model.iam == '' ? val.label : '-' + val.label;
			});
		},
		
	}
};
</script>
<style scoped lang="scss">
// page {
// 	background: #f5f5f9;
// }
.top{
	width: 100%;
	height: 260rpx;
	background: $uni-bg-color-ad;
	.above {
		display: flex;
		justify-content: center;
		margin-left: -46rpx;
	
		.picture {
			width: 117.8rpx;
			height: 137.4rpx;
			margin-left: 20rpx;
			margin-top: 20rpx;
		}
	}
	
	.below {
		display: flex;
		justify-content: center;
		margin-left: -46rpx;
		margin-top: -20rpx;
		.picture {
			width: 117.8rpx;
			height: 137.4rpx;
			margin-left: 20rpx;
			margin-top: 1rpx;
		}
	}
}
.count {
	margin-top: -50rpx;
	width: 100%;
	height: 100rpx;
	background: #FFFFFF;
	border-radius: 40rpx 40rpx 0rpx 0rpx;
	.count-to {
		font-size: 24rpx;
	}
	text {
		padding: 2rpx 12rpx;
		background: #ff9e21;
		color: #ffffff;
		font-size: 24rpx;
	}
}
.fgx{
	width: 100%;
	height: 20rpx;
	background-color: #F5F5F9;
	margin-top: 40rpx;
}
.fgx1{
	width: 100%;
	height: 20rpx;
	background-color: #F5F5F9;
}
.group {
	padding: 6rpx 21rpx;
	background: #f1f7ff;
	border-radius: 6rpx;
	margin: 30rpx 30rpx 0 30rpx;
}
.button {
	width: 662rpx;
	margin:148rpx auto 45rpx auto;
	background: #ab61ff;
	border-radius: 40rpx;
	border: 0;
	color: #fff;
	&.u-hairline-border:after {
		border: 0;
	}
}
.word {
	font-size: 36rpx;
	color: #0d1d36;
	font-weight: bold;
}
.qtsm{
	display: flex;
	align-items: center;
	.hz{
		color: #0D1D36;
		font-size: 30rpx;
		margin-left: 15rpx;
	}
}
.zwpj{
		width: 690rpx;
		height: 260rpx;
		background-color: #F5F5F9;
		margin-top: 40rpx;
		font-size: 30rpx;
		color: #F5F5F9;
		border-radius: 10rpx;
		line-height: 44rpx;
	}
</style>
